<template>
  <div class="user-points-detail-page">
    <div class="page-header">
      <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
      <h1>用户积分明细</h1>
    </div>
    
    <!-- 用户信息卡片 -->
    <el-card class="user-info-card" v-if="userInfo">
      <div class="user-info">
        <div class="user-avatar">
          <el-avatar :size="60" :src="userInfo.avatar">{{ userInfo.nickname?.charAt(0) }}</el-avatar>
        </div>
        <div class="user-details">
          <h3>{{ userInfo.nickname }}</h3>
          <p>用户ID：{{ userInfo.userId }}</p>
          <p>手机号：{{ userInfo.phone }}</p>
          <p>会员等级：<el-tag :type="getLevelTag(userInfo.level)">{{ userInfo.level }}</el-tag></p>
          <p>注册时间：{{ userInfo.registerTime }}</p>
        </div>
        <div class="points-summary">
          <div class="current-points">
            <span class="points-label">当前积分</span>
            <span class="points-value">{{ userInfo.points }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 筛选栏 -->
    <el-card class="filter-card">
      <div class="filter-bar">
        <el-select v-model="filter.type" placeholder="流水类型" style="width: 140px; margin-right: 12px;">
          <el-option label="全部" value="" />
          <el-option label="获取" value="income" />
          <el-option label="消耗" value="expense" />
          <el-option label="过期" value="expire" />
          <el-option label="调整" value="adjust" />
        </el-select>
        <el-date-picker 
          v-model="filter.dateRange" 
          type="daterange" 
          range-separator="至" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期" 
          style="width: 240px; margin-right: 12px;" 
        />
        <el-button type="primary" @click="searchDetail">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
        <el-button type="success" @click="exportDetail">导出流水</el-button>
      </div>
    </el-card>

    <!-- 积分流水表格 -->
    <el-card class="detail-card">
      <el-table :data="detailList" style="width: 100%">
        <el-table-column prop="date" label="日期" width="140" />
        <el-table-column prop="type" label="类型" width="80">
          <template #default="scope">
            <el-tag :type="getDetailTypeTag(scope.row.type)">{{ getDetailTypeText(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="积分变动" width="100">
          <template #default="scope">
            <span :style="{color: scope.row.type === 'income' ? '#67C23A' : (scope.row.type === 'expense' ? '#F56C6C' : '#909399')}" >
              {{ scope.row.type === 'income' ? '+' : (scope.row.type === 'expense' ? '-' : '') }}{{ scope.row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="变动后余额" width="100" />
        <el-table-column prop="desc" label="说明" />
        <el-table-column prop="operator" label="操作人" width="100" />
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

interface UserInfo {
  userId: string
  nickname: string
  phone: string
  points: number
  level: string
  registerTime: string
  avatar?: string
}

interface DetailItem {
  id: number
  date: string
  type: 'income' | 'expense' | 'expire' | 'adjust'
  amount: number
  balance: number
  desc: string
  operator: string
}

const route = useRoute()
const router = useRouter()

// 用户信息
const userInfo = ref<UserInfo | null>(null)

// 筛选条件
const filter = reactive({
  type: '',
  dateRange: []
})

// 分页
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 明细列表
const detailList = ref<DetailItem[]>([])

// 获取等级标签类型
const getLevelTag = (level: string) => {
  const levelMap: Record<string, string> = {
    'L1': 'info',
    'L2': 'success',
    'L3': 'warning',
    'L4': 'danger',
    'L5': 'danger',
    'L6': 'danger',
    'L7': 'danger'
  }
  return levelMap[level] || 'info'
}

// 获取明细类型文本
const getDetailTypeText = (type: string) => {
  const map: Record<string, string> = {
    income: '获取',
    expense: '消耗',
    expire: '过期',
    adjust: '调整'
  }
  return map[type] || type
}

// 获取明细类型标签
const getDetailTypeTag = (type: string) => {
  const map: Record<string, string> = {
    income: 'success',
    expense: 'danger',
    expire: 'info',
    adjust: 'warning'
  }
  return map[type] || 'info'
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 查询明细
const searchDetail = () => {
  // 模拟查询逻辑
  ElMessage.success('查询完成（mock）')
  loadDetailData()
}

// 重置筛选
const resetFilter = () => {
  filter.type = ''
  filter.dateRange = []
  ElMessage.success('筛选条件已重置')
  loadDetailData()
}

// 导出流水
const exportDetail = () => {
  ElMessage.success('积分流水导出成功（mock）')
}

// 加载明细数据
const loadDetailData = () => {
  // 模拟数据
  detailList.value = [
    { id: 1, date: '2024-01-01 10:00', type: 'income', amount: 100, balance: 1200, desc: '签到奖励', operator: '系统' },
    { id: 2, date: '2024-01-02 12:00', type: 'expense', amount: 50, balance: 1150, desc: '兑换商品', operator: '系统' },
    { id: 3, date: '2024-01-03 09:30', type: 'income', amount: 200, balance: 1350, desc: '任务奖励', operator: '系统' },
    { id: 4, date: '2024-01-04 15:00', type: 'expire', amount: 30, balance: 1320, desc: '积分过期', operator: '系统' },
    { id: 5, date: '2024-01-05 11:20', type: 'adjust', amount: 80, balance: 1400, desc: '手动调整', operator: '管理员' },
    { id: 6, date: '2024-01-06 14:30', type: 'income', amount: 150, balance: 1550, desc: '活动奖励', operator: '系统' },
    { id: 7, date: '2024-01-07 16:45', type: 'expense', amount: 100, balance: 1450, desc: '商品兑换', operator: '系统' },
    { id: 8, date: '2024-01-08 09:15', type: 'income', amount: 80, balance: 1530, desc: '每日签到', operator: '系统' }
  ]
  pagination.total = detailList.value.length
}

// 初始化
onMounted(() => {
  // 从路由参数获取用户信息
  const userId = route.params.userId as string
  const userData = route.query.userData as string
  
  if (userData) {
    try {
      userInfo.value = JSON.parse(decodeURIComponent(userData))
    } catch (e) {
      console.error('解析用户数据失败:', e)
    }
  }
  
  // 如果没有用户数据，使用模拟数据
  if (!userInfo.value) {
    userInfo.value = {
      userId: userId || '10001',
      nickname: '小明',
      phone: '13800001111',
      points: 1200,
      level: 'L2',
      registerTime: '2023-12-01'
    }
  }
  
  loadDetailData()
})
</script>

<style scoped>
.user-points-detail-page {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0;
  color: #303133;
}

.user-info-card {
  margin-bottom: 24px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-details {
  flex: 1;
}

.user-details h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
}

.user-details p {
  margin: 4px 0;
  color: #606266;
  font-size: 14px;
}

.points-summary {
  flex-shrink: 0;
  text-align: right;
}

.current-points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.points-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 4px;
}

.points-value {
  color: #409eff;
  font-size: 24px;
  font-weight: bold;
}

.filter-card {
  margin-bottom: 24px;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-card {
  margin-bottom: 24px;
}
</style> 